接下來我們要先載入靜態資源檔，將檔案初始化在我們的頁面上，並透過規則制定遊戲的方式，所以我們一步一步來

• 載入資源並渲染

//載入圖片，有兩個參數
//第一個是這個載入的物件要叫什麼，第二個是這個載入的東西相對路徑在哪裏
function preload() {
  this.load.image('sky', './assets/sky.png')
}
//在未調整任何屬性時，原點位置並不是在左上角，而是在物件水平置中與垂直置中的位置
//可以將原點設定爲 (0,0) x軸與y軸原點都是零零的情況，就可以用比較熟悉的方式去定位
//而phaser預設爲圖片正中央爲方便置中或擺放位置時比較好算(不用去考慮物件的長/2寬/2這些的)
//可以依照個人習慣調整
function create() {
  //this.add.image( 400 ,  300 ,  'sky' )
  this.add.image(0, 0, 'sky').setOrigin(0, 0)
}

好的接下來把會用到的資源檔都先載入進來

function preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('ground', 'assets/platform.png');
  this.load.image('star', 'assets/star.png');
  this.load.image('bomb', 'assets/bomb.png');
  this.load.spritesheet('dude',
    'assets/dude.png', {
      frameWidth: 32,
      frameHeight: 48
    }
  );
}

是不是有一個比較不一樣的資源被載入？這個是我們的主角，他是透過一連串的圖片變成一個有動態的效果僞動畫，有點類似 background 的 background-position ，當有任何監聽或是觸發事件時，移動他的圖層，就有動起來的感覺，而兩個參數則是 x 軸與 y 軸的大小，可以去嘗試改x軸的參數，你可以看到更多他的圖片，而之後也會透過事件去改變他的窗口

精靈引擎
爲什麼有sprite sheet

再來開始創造一些平臺吧

在這邊因爲平臺是要可以站的，代表我們要加入物理引擎，簡單來說，賦予創造出來的物件有一些物理特性；如果在一開始加入其他圖片，會發現我們圖片就只是圖片，不會像我們玩的遊戲可以有動作、行爲，所以我們才需要物理引擎，例如物件有碰撞的特性、遊戲裡有重力的特性、子彈有速度的感覺，這些物理特性都要透過程式碼加入，而phaser將這一塊包好讓我們方便使用；而物理引擎有分動態與靜態，如下我們創造的平臺就是屬於靜態的，而往後會示範動態的創建與實作

var platforms;

function create() {
  this.add.image(0, 0, 'sky').setOrigin(0, 0)
  // .staticGroup ，加入靜態物件
  platforms = this.physics.add.staticGroup();

  // setScale 爲調整圖片的大小，按照比較等比縮放
  // .refreshBody() 是必須的，當我們有等比例縮放時，它只是視覺上的變化，實際的大小還是存在只是看不到，所以我們要重新定義他的身體大小爲我們縮放的比例，可以嘗試沒有設定的違和感
  platforms.create(400, 568, 'ground').setScale(2).refreshBody();

  platforms.create(400, 100, 'ground').setScale(0.5).refreshBody();
  platforms.create(600, 400, 'ground').setScale(1.5).refreshBody();
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');
  }

並且將 physice 在 config 的設定檔匯入
physics 裡面是設定遊戲內物理引擎的共用地方，我們也可以在create去個別設定(可以把 y : 300 註解掉，並在 create() 裡面加上 player.body.setGravityY(300) ，兩者個效果是一樣的)

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 300
      },
      debug: false
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

關於物理引擎